<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CSC Banking System</title>

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/screen.css" type="text/css" />
<link rel="stylesheet" href="css/jquery-ui-min.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css" />
<link href="css/logo-nav.css" rel="stylesheet">


<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>


<script type="text/javascript">
	$(document).ready(function() {
		$("#mytable").dataTable();

	});
</script>
</head>
<body>
	<%@ include file="models/navbar.jsp"%>

	<div class="container">

		<div id="content-outer">
			<!-- start content -->
			<div id="content">

				<!--  start page-heading -->
				<div id="page-heading">
					<h1>Account Management</h1>
				</div>
				<table border="0" width="100%" cellpadding="0" cellspacing="0"
					id="content-table">
					<tr>
						<th rowspan="3" class="sized"><img
							src="images/shared/side_shadowleft.jpg" width="20" height="300"
							alt="" /></th>
						<th class="topleft"></th>
						<td id="tbl-border-top">&nbsp;</td>
						<th class="topright"></th>
						<th rowspan="3" class="sized"><img
							src="images/shared/side_shadowright.jpg" width="20" height="300"
							alt="" /></th>
					</tr>
					<tr>
						<td id="tbl-border-left"></td>
						<td>
							<div id="content-table-inner">
								<div id="page-heading">
									<h1>Add Account Information</h1>
								</div>
								<div id="content-table-inner" style="padding-left: 35px;">
									<table border="0" width="100%" cellpadding="0" cellspacing="0">
										<tr valign="top">
											<td>
												<form action="createAccount.html" method="post">
													<table border="0" cellpadding="0" cellspacing="0"
														id="id-form">
														<tr>
															<th valign="top">Account Type:</th>
															<td><select id="selectAccountType"
																name="accountType">
																	<option value="Deposit Account">Deposit
																		Account</option>
																	<option value="Saving Account">Saving Account</option>
																	<option value="Others">Others</option>
															</select></td>
															<td></td>
														</tr>
														<tr>
															<th valign="top">Account Number</th>
															<td><input type="text" class="inp-form"
																name="accountNumber" /></td>
														</tr>
														<tr>
															<th valign="top">Account Name:</th>
															<td><input type="text" class="inp-form"
																name="accountName" /></td>
															<td></td>
														</tr>
														<tr>
															<td></td>
															<td><input type="submit" class="btnAdd" value="Save"
																id="addAccount" /></td>
															<td></td>
														</tr>
													</table>
												</form>
											</td>
										</tr>
									</table>
								</div>
								<table id="mytable">
									<thead>
										<tr>
											<th>Account Number</th>
											<th>Account Name</th>
											<th>Account Type</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach var="account" items="${listAccount}">
											<tr>
												<td>${account.accountNumber}</td>
												<td>${account.accountName}</td>
												<td>${account.accountType}</td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
						</td>
						<td id="tbl-border-right"></td>
					</tr>
					<tr>
						<th class="sized bottomleft"></th>
						<td id="tbl-border-bottom">&nbsp;</td>
						<th class="sized bottomright"></th>
					</tr>
				</table>
				<br />
			</div>
			<div class="clear">&nbsp;</div>
		</div>

		<div class="clear">&nbsp;</div>

		<!-- start footer -->
		<%@ include file="models/footer.jsp"%>
	</div>
</body>
</html>